<template>
  <div class="forget-body">
    <div class="logo-con">
      <h2 class="logo-title">摩塑网管理平台</h2>
    </div>
    <div class="forget-form-layout">
      <div class="forget-title">忘记密码</div>
      <div class="form-block">
        <el-form  autoComplete="on"  :model="forgetForm"  :rules="forgeRules"  ref="forgetForm"  label-position="left">
          <el-form-item prop="oldPhone">
            <el-input name="oldPhone" type="text" v-model="forgetForm.oldPhone"  autoComplete="off" placeholder="请输入注册时手机号"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input name="code" type="text" v-model="forgetForm.code"  autoComplete="off"  placeholder="请输入短信验证码" style="width:60%;float:left">
            </el-input>
            <el-button type="text" style="float:right;width:120px" @click="handleSendLoginSMSCode" :disabled="sendCode">{{verifyCodeText}}</el-button>
          </el-form-item>
          <el-form-item prop="newPassword">
            <el-input name="newPassword" type="text" v-model="forgetForm.newPassword"  autoComplete="off" placeholder="请输入新密码8-20位"></el-input>
          </el-form-item>
          <el-form-item style="margin-bottom:10px">
            <el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleFindPassword">
              确认修改
            </el-button>
          </el-form-item>
          <div class="link-block">
            <span>已有账号，<router-link to="/login" style="color:#1890FF">立即登录</router-link></span>
             <span class="blackHome" @click="goHome" style="cursor: pointer">返回首页</span>
          </div>
        </el-form>
      </div>
    </div>

    <div class="ms-footer">
      <p>copyright © {{year}} 泛塑（上海）科技有限公司</p>
    </div>
  </div>
</template>

<script>
  import logo from '@/assets/images/logo.png'
  import {validatePhone,validatePassWord} from '@/utils/validate';
  import {smsFindPassword,sendFindPasswordSMSCode} from '@/api/login'
  let md5 = require('md5');
  export default {
    name: 'login',
    data() {
      const isvalidatePhone = (rule, value, callback) => {
        if(!validatePhone(value)){
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      };
      const validatePass = (rule, value, callback) => {
        if (!validatePassWord(value)) {
          callback(new Error('新密码需为8至20位，至少包含英文字母、数字和符号中的两种'))
        } else {
          callback()
        }
      };
      return {
        isAgree: true,
        sendCode:false,//是否能发送验证码
        forgetForm: {
          oldPhone: '',
          code:'',
          newPassword:'',
        },
        forgeRules: {
          oldPhone: [{required: true, trigger: 'blur', validator: isvalidatePhone}],
          code: [{required: true, message: '请输入验证码',trigger: 'blur'}],
          newPassword: [{required: true, trigger: 'blur', validator: validatePass}]
        },
        loading: false,
        logo,
        falg: false, //是否倒计时
        reciprocalTime : null,//倒计时函数
        verifyCodeText:'获取短信验证码',
        timer: 60,//倒计时秒数
        year:(new Date).getFullYear(),
      }
    },
    methods: {
      handleFindPassword() {
        this.$refs.forgetForm.validate(valid => {
          if (valid) {
            this.loading = true;
            //to-do:修改密码参数调用
            smsFindPassword(this.forgetForm.oldPhone,this.forgetForm.code,this.forgetForm.newPassword).then(()=>{
              this.$router.push({name:"login"});
              this.loading = false;
            }).catch(()=>{
              this.loading = false;
            })

          } else {
            console.log('参数验证不合法！');
            return false
          }
        })
      },
      /**
       * 发送验证码
       */
      handleSendLoginSMSCode(){
        if(!validatePhone(this.forgetForm.oldPhone)){
          this.$message({
            message: '请输入正确的手号！',
            type: 'warning',
            duration: 1000
          });
          return
        }
        this.sendCode = true;
        let encryption =  md5(this.forgetForm.oldPhone + 'moresu.,!');
        sendFindPasswordSMSCode({mobile:this.forgetForm.oldPhone,encryption,apiId:'ADMINWEB'}).then(()=>{
          this.$message({
            message: '验证码已送',
            type: 'success',
            duration: 1000
          });
          this.showCountDown();
        }).catch(()=>{
          this.sendCode = false;
        })

      },
      goHome(){
        this.$router.push({name:"index"});
      },

      /**
       * 倒计时
       * @return null
       */
      showCountDown () {
        this.verifyCodeText = this.timer + '秒后重新获取';
        this.falg = true;
        let self = this;
        self.reciprocalTime = function(time){
          //@ts-ignore : js setTimeout
          setTimeout(function(){
            if(time >=1 && self.falg){
              time--;
              self.verifyCodeText=time + '秒后重新获取';
              self.reciprocalTime(time);
            }else{
              self.verifyCodeText='获取短信验证码';
              self.sendCode = false;
              //@ts-ignore : js clearTimeout
              clearTimeout(self.reciprocalTime);
            }
          },1000);
        };
        self.reciprocalTime(this.timer);
      },
    }
  }
</script>

<style scoped lang="scss">
  .forget-body{
    background: #f0f0f0;
    min-height: 100%;
    padding-top: 5%
  }
  .logo-title {
    text-align: center;
  }
  .logo-img{
    background: #fff;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    text-align: center;
    margin: 0 auto
  }

  .logo-img img{
    width: 66px;
    margin: 10px auto
  }
  .forget-form-layout {
    padding:0;
    width: 550px;
    margin: 20px auto;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    .forget-title {
      text-align: center;
      height:50px;
      background: #1890FF;
      color:#fff;
      font-size:20px;
      line-height: 50px;
    }
    .form-block{
      width:360px;
      margin:25px auto;
      .link-block{
        height:40px;
        line-height: 40px;
        font-size: 12px;
        color:#808080;
        position: relative;
        .blackHome{
          position:absolute;
          right:0;

        }
      }
    }
  }
  .ms-footer{
    padding: 50px 0;
    text-align: center;
    color:#808080
  }

  .ms-footer h3{
    font-size: 30px;
    font-weight: normal
  }

  .ms-footer p{
    font-size: 12px
  }
</style>
